/* components */
import { RoleViewContentEditView, RoleViewContentView, RoleViewContentStayAllotView } from '@src/modules/account/roleModule/component'
/* enum */
import ComponentNameEnum from '@model/enum/ComponentNameEnum'
/* hooks */
import { useStoreCurrentSelectRole, useStoreMode } from '@src/modules/account/roleModule/store/hooks'
/* model */
import Role from '@model/entity/Role/Role'
/* vue */
import {ComponentInstance, ComputedRef, defineComponent, ref } from 'vue'
/* store */

export type RoleViewRightPanelProps = {

}

export interface RoleViewRightPanelSetupState {
  currentSelectRole: ComputedRef<Role>;
}

export enum RoleViewRightPanelEventEnum {
  Input = 'input',
  Edit = 'edit',
  View = 'view',
}

export type RoleViewRightPanelEmitsOptions = {
  input: () => void;
}

export type RoleViewRightPanelInstance = ComponentInstance & RoleViewRightPanelSetupState
export type RoleViewRightPanelVM = RoleViewRightPanelSetupState & RoleViewRightPanelProps & ComponentInstance

export default defineComponent({
  name: ComponentNameEnum.RoleViewRightPanel,
  emits: [
    RoleViewRightPanelEventEnum.Input,
    RoleViewRightPanelEventEnum.Edit,
    RoleViewRightPanelEventEnum.View,
  ],
  setup(props: RoleViewRightPanelProps, { slots, emit }) {
    
    const { isCreateMode, isEditMode, isUserViewMode, isAssignedUserViewMode } = useStoreMode()
    const { currentSelectRole } = useStoreCurrentSelectRole()
    
    return {
      isCreateMode,
      isEditMode,
      isUserViewMode,
      isAssignedUserViewMode,
      currentSelectRole
    }
  },
  render() {
    return (
      <div class={ComponentNameEnum.RoleViewRightPanel}>
        
        {this.isUserViewMode && (
          <RoleViewContentView />
        )}
        
        {(this.isEditMode || this.isCreateMode) && (
          <RoleViewContentEditView />
        )}
        
        {this.isAssignedUserViewMode && (
          <RoleViewContentStayAllotView />
        )}
        
      </div>
    ) as any
  }
}) as any
